<template>
  <card-layout title="生态环境告警" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22">
        <Menu />
      </el-icon>
    </template>
    <div class="warning-list">
      <div class="alert blue">
        2025-08-21 10:15，【粉尘浓度告警】宝宏矿业： FC001传感器监测的PM2.5浓度超过110μg/m³，达到中度污染！敏感人群需做好防护措施。
      </div>
      <div class="alert yellow">
        2025-08-21 10:15，【粉尘浓度告警】宝宏矿业： FC001传感器监测的PM2.5浓度超过110μg/m³，达到中度污染！敏感人群需做好防护措施。
      </div>
      <div class="alert orange">
        2025-08-21 10:15，【粉尘浓度告警】宝宏矿业： FC001传感器监测的PM2.5浓度超过110μg/m³，达到中度污染！敏感人群需做好防护措施。
      </div>

      <!-- <div class="alert red">
        2025-08-21 10:15，【粉尘浓度告警】宝宏矿业： FC001传感器监测的PM2.5浓度超过110μg/m³，达到中度污染！敏感人群需做好防护措施。
      </div> -->
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  flex: 0.8;
  display: flex;
  flex-direction: column;
}

.warning-list {
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;

  .alert {
    padding: 4px 8px;
    box-sizing: border-box;
    /* 核心样式：实现两行省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 控制显示的行数 */
    overflow: hidden;
    user-select: none;
    color: #fff;
    font-size: 13px;

    &:active {
      scale: 0.99;
    }

    /* 隐藏超出的内容 */
    &.blue {
      background: #0959d990;
      border: 1px solid #0959d9c2;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
        border: 1px solid #127fe6;
      }
    }

    &.yellow {
      background: #d4b20689;
      border: 1px solid #d4b206c3;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
        border: 1px solid #e3d107;
      }
    }

    &.orange {
      background: #d46b089c;
      border: 1px solid #d46b08d4;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
        border: 1px solid #ff820d;
      }
    }

    &.red {
      background: #cf132391;
      border: 1px solid #cf1323c4;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
        border: 1px solid #ec192b;
      }
    }
  }

}
</style>
